define(["vue", "axios", "common", "MINT"], function (Vue, axios, common, MINT) {

    Vue.component(MINT.Popup.name, MINT.Popup);

    Vue.component("search", {
        template: '<div center-v><div center-v search v-on:click="show">{{value.name}}<img src="resources/image/common/search.png" /></div><mt-popup v-model="display" pop-transition="popup-fade" v-bind:modal="showmodal" :closeOnClickModal=false><div tree-selector><div><div class="active">{{title}}</div></div><search-tree v-bind:treeurl="treeurl" v-bind:listurl="listurl" v-bind:autoload="autoload"></search-tree><div center><input type="button" value="确定" confirm v-on:click="confirm" /><input type="button" value="关闭" cancel v-on:click="cancel" /></div></div></mt-popup></div>',
        props: {
            showmodal: {
                default: true
            },
            title: String,
            treeurl: String,
            listurl: String,
            value: {
                id: String,
                name: String
            },
            autoload: {
                default: false
            }
        },
        data: function () {
            return {
                display: false,
                selected: {}
            }
        },
        mounted: function () {
            this.$on("change", function (item) {
                this.selected = item;
            });
        },
        methods: {
            show: function () {
                this.display = true;
            },
            confirm: function () {
                this.$emit("input", this.selected);
                this.display = false;
            },
            cancel: function () {
                this.display = false;
            }
        }
    });

    Vue.component("search-tree", {
        template: '<div><div><search-item v-for="item in models" v-bind:key="item.treenodePath" v-bind:model="item" v-on:click.native="setTree(item.treenodePath)"></search-item></div><div v-if="listurl"><div><input type="text" placeholder="请输入查询条件" v-model="filter" /><img src="resources/image/common/search.png" v-on:click="doFilter" /></div><div list-item v-for="item in filterLists" v-on:click="change(item)" v-bind:class="{active: isSelected(item.id)}">{{item.code}} {{item.name}}</div></div></div>',
        props: {
            treeurl: String,
            listurl: String,
            autoload: Boolean
        },
        data: function () {
            return {
                isActive: true,
                treeId: "",
                selected: {},
                models: [],
                lists: [],
                filter: "",
                filterLists: []
            }
        },
        mounted: function () {
            var self = this;
            axios.get(this.treeurl)
                .then(function (response) {
                    self.models = response.data;
                });
            if (this.autoload && this.listurl) {
                axios.get(this.listurl)
                    .then(function (response) {
                        self.lists = response.data;
                    });
            }
            this.$on("query", this.query);
        },
        computed: {
        },
        methods: {
            setTree: function (id) {
                this.treeId = id;
            },
            query: function (model) {
                if (this.listurl) {
                    var self = this;
                    axios.get(this.listurl + model.treenodePath)
                        .then(function (response) {
                            self.lists = response.data;
                            self.doFilter();
                        });
                } else {
                    this.change(model);
                }
            },
            change: function (item) {
                this.selected = item;
                this.$parent.$parent.$emit("change", item);
            },
            isSelected: function (id) {
                return this.selected.id == id;
            },
            doFilter: function () {
                if (common.isEmpty(this.filter)) {
                    this.filterLists = this.lists;
                } else {
                    this.filterLists = [];
                    for (var i = 0; i < this.lists.length; i++) {
                        if (this.lists[i].name.indexOf(this.filter) > -1 || this.lists[i].code.indexOf(this.filter) > -1) {
                            this.filterLists.push(this.lists[i])
                        }
                    }
                }
            }
        }
    });

    Vue.component("search-item", {
        template: '<div tree-item v-bind:class="{active: isActive}"><div v-on:click="query(model)">{{model.name}}</div><div v-if="hasChild" v-show="expand"><search-item v-for="item in model.children" v-bind:key="item.treenodePath" v-bind:model="item" v-on:click.native="setTree(item.treenodePath)"></search-item></div></div>',
        props: {
            model: Object
        },
        data: function () {
            return {
                treeId: "",
                expand: false
            }
        },
        computed: {
            hasChild: function () {
                return this.model.children && this.model.children.length
            },
            isActive: function () {
                return this.model.treenodePath == this.$parent.treeId && this.$parent.isActive;
            }
        },
        mounted: function () {
            this.$on("query", function (model) {
                this.$parent.$emit("query", model)
            })
        },
        methods: {
            setTree: function (id) {
                this.treeId = id;
            },
            query: function (model) {
                if (this.hasChild) {
                    this.expand = !this.expand
                }
                this.$parent.$emit("query", model);
            }
        }
    })
});